<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <div class="header">
        <img :src="logoimg" class="header-logo">
        <span class="header-title">武汉市银行电子结算中心数据可视化平台</span>
        <span class="header-right">当前日期时间：{{ currDateTime }}</span>
      </div>

      <div class="panel-group">
        <panel-group/>
      </div>

      <div class="area-left-up">
        <span class="area-title-text">平台数据种类统计</span>
        <pie-chart/>
      </div>

      <div class="area-left-down">
        <span class="area-title-text">低保户银行资产核查统计</span>
        <!--        <line-chart :chart-data="lineChartData"/>-->
        <vertical-bar-chart/>
      </div>

      <div class="area-center">
        <span class="area-title-text">湖北省银行网店分布情况</span>
        <map-area-chart/>
      </div>

      <div class="area-right-up">
        <span class="area-title-text">反诈反赌核查情况排名</span>
        <hor-bar-chart/>
      </div>

      <div class="area-right-down">
        <span class="area-title-text">金融信息服务平台查询情况</span>
<!--        <line-chart/>-->
        <my-design></my-design>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import logoImg from '../assets/logo/logo.png'
import {formatTime} from '@/utils'
import PanelGroup from './charts/PanelGroup'
import PieChart from './charts/PieChart'
import TreeMapChart from './charts/TreeMapChart'
import LineChart from './charts/LineChart'
import MapAreaChart from './charts/MapAreaChart'
import HorBarChart from './charts/HorBarChart'
import VerticalBarChart from './charts/VerticalBarChart'
import ThreeLineChart from "./charts/ThreeLineChart";
import MyDesign from "@/views/charts/MyDesign";

export default {
  name: 'Index',
  components: {
    PanelGroup,
    PieChart,
    TreeMapChart,
    LineChart,
    MapAreaChart,
    HorBarChart,
    VerticalBarChart,
    ThreeLineChart,
    MyDesign
  },
  mixins: [drawMixin],
  data() {
    return {
      logoimg: logoImg,
      timing: null,
      currDateTime: null,
      loading: true,
      decorationColor: ['#568aea', '#000000'],
      reqTotalNum: 0
    }
  },

  mounted() {
    this.getDateTime();
  },

  beforeDestroy() {
    clearInterval(this.timing);
  },

  methods: {
    getDateTime() {
      this.timing = setInterval(() => {
        this.currDateTime = formatTime(new Date(), 'yyyy-MM-dd HH: mm: ss')
      }, 1000)
    },
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
</style>
